﻿<svg 
  class="draggable-container"
  xmlns="http://www.w3.org/2000/svg"
  ng-mousedown="mouseDown($event)"
  ng-mousemove="mouseMove($event)"  
  >
  <g 
  	ng-repeat="node in graph.nodes"
  	ng-mousedown="nodeMouseDown($event, node)"
  	ng-attr-transform="translate({{node.x()}}, {{node.y()}})"
  >

	<rect ng-if="node.type() == 'TaskNode'"
	    ng-attr-class="{{node.selected() && 'selected-node-rect' 
		  	|| (node == mouseOverNode && 'mouseover-node-rect' || 'node-rect')}}" 
        rx="10"
        ry="10"
	  	x="0"
	  	y="0"
	  	ng-attr-width="{{node.width()}}"
	  	ng-attr-height="{{node.height()}}"
	  	fill="url(#nodeBackgroundGradient)">
	</rect>
    <circle 
    	ng-if="node.type() == 'StartNode' || node.type() =='EndNode'"
    	ng-attr-r="{{20}}"
        cx="0"
        cy="0"
    	stroke="black"
    	stroke-width="3"
    	fill="red"
    >
    </circle>
      <text ng-if="node.type() == 'StartNode' || node.type() =='EndNode'"
            x="0"
            y="0"
            text-anchor="middle"
            alignment-baseline="middle">
          {{node.name()}}
      </text>
      <text ng-if="node.type() == 'TaskNode'"
            ng-attr-x="{{node.width()/2}}"
            ng-attr-y="{{node.height()/2}}"
            text-anchor="middle"
            alignment-baseline="middle">
          {{node.name()}}
      </text>

	<g ng-repeat="connector in node.inputConnectors" class="connector input-connector">
        <circle ng-attr-r="{{5}}"
                ng-attr-cx="{{connector.x()}}"
                ng-attr-cy="{{connector.y()}}"
                stroke="black"
                stroke-width="3"
                fill="green" />
        <text ng-attr-x="{{connector.x()}}"
              ng-attr-y="{{connector.y()}}"
              text-anchor="left"
              alignment-baseline="middle">
        </text>
	</g>
	<g ng-repeat="connector in node.outputConnectors" class="connector output-connector">
        <circle ng-attr-r="{{5}}"
                ng-attr-cx="{{connector.x()}}"
                ng-attr-cy="{{connector.y()}}"
                stroke="black"
                stroke-width="3"
                fill="green" />
        <text ng-attr-x="{{connector.x() + 5}}"
              ng-attr-y="{{connector.y()}}"
              text-anchor="left"
              alignment-baseline="middle">
        </text>
	</g>
  </g>

  <g>
  	<g ng-repeat="line in graph.lines"
  		class="line">
  		<path class="line-line"
  			ng-attr-d="M {{line.sourceCoordX()}}, {{line.sourceCoordY()}}
  					   C {{line.sourceTangentX()}}, {{line.sourceTangentY()}}
  					     {{line.destTangentX()}}, {{line.destTangentY()}}
  					     {{line.destCoordX()}}, {{line.destCoordY()}}"
  		>
		</path>
		<circle
			r="5"
			ng-attr-cx="{{line.sourceCoordX()}}"
			ng-attr-cy="{{line.sourceCoordY()}}"
		>
		</circle>
		<circle
			r="5"
			ng-attr-cx="{{line.destCoordX()}}"
			ng-attr-cy="{{line.destCoordY()}}"
		>
		</circle>
  	</g>
  </g>
    <rect 
          ng-if="dragSelecting"
          class="drag-selection-rect"
          ng-attr-x="{{dragSelectionRect.x}}"
          ng-attr-y="{{dragSelectionRect.y}}"
          ng-attr-width="{{drageSelectionRect.width}}"
          ng-attr-height="{{dragSelectionRect.height}}">
    </rect>          
</svg>